<template>
    <el-row :gutter="20">
        <el-col :span="16">
            <div class="colorFFF">
                <div class=" marginBottom20 colorFFF">
                    <div v-if="datas.type != 'same_city'" class="flexFCC align-center colorFFF size14"
                        style="width: 150px;margin: 0 auto">
                        <img alt src="@/assets/goods/userml.png" srcset width="80px" />
                        <span class="pl-4 size30 marginTop10">1V1密聊</span>
                    </div>

                    <div v-else class="flexFCC align-center colorFFF size14" style="width: 150px;margin: 0 auto;">
                        <img alt src="@/assets/goods/userkj.png" srcset width="80px" />
                        <span class="pl-4 size30 marginTop10">同城空降</span>
                    </div>
                    <div class="marginTop10 size18">
                        {{ datas.desc }}
                    </div>
                    <el-row :gutter="10">
                        <el-col :key="key" :span="6" class="mt-5 " v-for="(value, key) in datas.images">
                            <div class="sizeCenter" style="width: 100%; height: 300px;margin: 20px auto;">
                                <el-image :preview-src-list="datas.images" :src="value" class="radius10 " fit="cover"
                                    style="width: 100%; height: 100%;"></el-image>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="box back151225 marginBottom20 colorFFF">
                <div class="flexFS" style="width: 100%;" v-if="datas.author">
                    <el-avatar :size="55" :src="datas.author.avatar"></el-avatar>
                    <div class="color333" style="width: 200px;margin-left:10px">
                        <div class="size20 flexFS colorFFF">
                            {{ datas.author.name }}
                            <img alt src="@/assets/image/vip-icon.png" srcset style="width: 50px;margin-left:10px"
                                v-if="datas.author.is_vip" />
                        </div>
                        <div class="flexFS colorFFF size14 marginTop10">
                            <i v-if="datas.province" class="el-icon-location-outline" style="font-size: 20px;"></i>
                            <span class="marginLeft5">{{ datas.province + datas.city + datas.area }}</span>

                        </div>
                    </div>
                </div>

                <div class="flex align-center colorFFF size14 marginTop30" style="width: 150px;">
                    <img alt src="@/assets/wallet/time.png" srcset width="20px" />
                    <span class="pl-4 size18">服务时间</span>
                </div>

                <div class="size14 colorFFDB5C flexFS marginTop10" v-if="datas.week.length != 7">
                    <div v-for="(val, inx) in datas.week" :key="inx" class="marginRight10">
                        {{ val | weekFormatTwo }}
                    </div>
                    <div>
                        {{ datas.start_time.substring(0, 5) + '-' + datas.end_time.substring(0, 5) }}
                    </div>
                </div>

                <div class="size14 colorFFDB5C flexFS " v-else>
                    <div class="marginRight10">
                        每天
                    </div>
                    <div>
                        {{ datas.start_time.substring(0, 5) + '-' + datas.end_time.substring(0, 5) }}
                    </div>
                </div>

                <div class="back272337 marginBottom20 marginTop20" style="height: 1px;"></div>

                <div class="padding20" v-if="datas.package.length > 0">
                    <div>服务项目</div>
                    <div class="flexFS">
                        <div class="project flexFS marginTop10 size14" v-for="(val, inx) in datas.package" :key="inx">
                            <span class="marginRight10"> {{ val.desc }}</span>
                            <span class="marginRight10"> {{ val.time + '分钟' }}</span>
                            <span class="marginRight10" style="opacity: 0.5;"> {{ val.price + '' +
                                $store.state.config.coin_name }}</span>
                        </div>
                    </div>

                </div>
            </div>
        </el-col>

    </el-row>
</template>

<script>
export default {
    data() {
        return {
            datas: {}
        }
    },
    mounted() {
        if (this.$route.query.id) {
            console.log("this.$route.query.id", this.$route.query.id)
            this.getDetails(this.$route.query.id)
        }
    },
    methods: {
        getDetails(id) {
            let that = this
            this.$request.get('/secret/get/' + id).then((res) => {
                that.datas = res
                console.log("getDetails", res)
            })
        },
    }

}
</script>
<style lang="scss" scoped>
.project {
    height: 32px;
    background: #272337;
    border-radius: 40px;
    opacity: 1;
    border: 1px solid #3F3B54;
    padding: 0 10px;
}
</style>